<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Kimox Calc.</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="calculator.png" type="image/x-icon" />
</head>

<body bgColor="#F8C128" onload="animate('kimo');">

    <div class="mainframe">
        <span id="screen" value="0" class="screen" maxlength="10">0</span>
        <span id="clear" class="clear" onclick="clr();">C</span>
        <div class="keys">
            <span id="n7" value="7" class="numbers" onclick="print('7');">7</span>
            <span id="n8" value="8" class="numbers" onclick="print('8');">8</span>
            <span id="n9" value="9" class="numbers" onclick="print('9');">9</span>
            <span id="by" value="x" class="operation" onclick="print('*');">x</span>
            <span id="n4" value="4" class="numbers" onclick="print('4');">4</span>
            <span id="n5" value="5" class="numbers" onclick="print('5');">5</span>
            <span id="n6" value="6" class="numbers" onclick="print('6');">6</span>
            <span id="plus" value="+" class="operation" onclick="print('+');">+</span>
            <span id="n1" value="1" class="numbers" onclick="print('1');">1</span>
            <span id="n2" value="2" class="numbers" onclick="print('2');">2</span>
            <span id="n3" value="3" class="numbers" onclick="print('3');">3</span>
            <span id="dvide" value="-" class="operation" onclick="print('-');">-</span>
            <span id="n0" value="0" class="numbers" onclick="print('0');">0</span>
            <span id="point" value="." class="point" onclick="print('.');">.</span>
            <span id="equal" onclick="equal();" class="operation">=</span>
            <span id="mltbly" value="/" class="operation" onclick="print('/');">/</span>
        </div>
    </div>

    <img src="adventure-time-wallpaper-3135-wallpaper-hd-wallpaper-cartoons-picture-adventure-time-hd-wallpaper.jpg"/>

    <div class="container">
        <h1 id="kimo">KimoX<br>Calculator</h1>
    </div>

    <script language="javascript" type="text/javascript" charset="utf-8" async defer>
    function print(xz) {
        if (document.getElementById("screen").innerHTML == '0') {
            document.getElementById("screen").innerHTML = xz;
        } else {
            document.getElementById("screen").innerHTML += xz;
        }
    }

    function equal() {
        var xx = document.getElementById("screen").innerHTML;
        var zz = (eval(xx));
        document.getElementById("screen").innerHTML = zz;
    }

    function clr() {
        document.getElementById("screen").innerHTML = '0';
    }

    function animate(ks){
    var element = document.getElementById(ks);
    var textNode = element.childNodes[0];
    var text = textNode.data;
    setInterval(function(){
        text = text[text.length - 1] + text.substring(0, text.length - 1);
        textNode.data = text;
    }, 400);
}
    </script>
</body>

</html>